<template>
    <!--    <div style="color: #666;font-size: 14px;">-->
    <div style="background-image:linear-gradient(to bottom right, #b2e0fd, #fff9f9);">
        <!--    div{-->
        <!--     ;-->
        <!--    }-->
        <div style="padding-bottom: 20px">
            <b>您好！{{ user.nickname }}</b>
        </div>
        <el-row style="margin-top: 40px">
            <el-col :span="12">
                <div style="width: 500px; margin: 0 auto; padding: 20px; box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); border-radius: 10px;">
                    <div style="text-align: center; margin-bottom: 20px; font-size: 24px">
                        <b>全国疫情实时数据</b>
                    </div>
                    <div style="display: flex; flex-wrap:wrap; justify-content: flex-start;">
                        <div class="item" style="background-color: lightblue">
                            <div class="item_title">境外输入</div>
                            <div class="item_num" style="color: RoyalBlue">{{ total.input ? total.input : '未更新' }}</div>
                            <div class="item_num item_num_plus">较昨日 <span
                                    style="color: RoyalBlue">+{{ today.input }}</span></div>
                        </div>
                        <div class="item" style="background-color: aliceblue">
                            <div class="item_title">无症状感染者</div>
                            <div class="item_num" style="color: LightCoral">{{ extData.noSymptom ? extData.noSymptom :
                                '未更新' }}
                            </div>
                            <div class="item_num item_num_plus">较昨日 <span style="color: LightCoral">+{{ extData.incrNoSymptom }}</span>
                            </div>
                        </div>
                        <div class="item" style="background-color: lightgoldenrodyellow">
                            <div class="item_title">现有确诊</div>
                            <div class="item_num" style="color: OrangeRed">{{ ( total.confirm - total.dead - total.heal
                                ) ? ( total.confirm - total.dead - total.heal ) : '未更新' }}
                            </div>
                            <div class="item_num item_num_plus">较昨日 <span style="color: OrangeRed">+{{ today.confirm - today.dead - today.heal ? today.confirm - today.dead - today.heal : '' }}</span>
                            </div>
                        </div>
                        <div class="item" style="background-color: lightgray">
                            <div class="item_title">累计确诊</div>
                            <div class="item_num" style="color: Brown">{{ total.confirm ? total.confirm : '未更新' }}</div>
                            <div class="item_num item_num_plus">较昨日 <span
                                    style="color: Brown">+{{ today.confirm }}</span></div>
                        </div>
                        <div class="item" style="background-color: lightpink">
                            <div class="item_title">累计死亡</div>
                            <div class="item_num" style="color: #333">{{ total.dead ? total.dead : '未更新' }}</div>
                            <div class="item_num item_num_plus">较昨日 <span style="color: #333">+{{ today.dead }}</span>
                            </div>
                        </div>
                        <div class="item" style="background-color: lightgreen">
                            <div class="item_title">累计治愈</div>
                            <div class="item_num" style="color: green">{{ total.heal ? total.heal : '未更新' }}</div>
                            <div class="item_num item_num_plus">较昨日 <span style="color: green">+{{ today.heal }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="12">
                <div id="main" style="width: 100%; height: 500px"></div>
            </el-col>

        </el-row>

    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import '@/utils/china.js'

    export default {
        name: "Home",
        data() {
            return {
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                total: {},
                today: {},
                extData: {}
            }
        },
        mounted() {
            const options = {
                //标题样式
                title: {
                    text: '中国疫情地图',
                    x: "center",
                    y: '0%',
                    textStyle: {
                        fontSize: 20,
                        color: "#333"
                    },
                },
                //这里设置提示框 (鼠标悬浮效果)
                tooltip: {
                    //数据项图形触发
                    trigger: 'item',
                    //提示框浮层的背景颜色。 (鼠标悬浮后的提示框背景颜色)
                    backgroundColor: "white",
                    //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
                    formatter: '地区：{b}<br/>现有确诊病例：{c}'
                },
                //视觉映射组件
                visualMap: {
                    top: 'center',
                    left: 'left',
                    // 数据的范围
                    min: 10,
                    max: 100,
                    text: ['高', '低'],
                    realtime: true,  //拖拽时，是否实时更新
                    calculable: true,  //是否显示拖拽用的手柄
                    inRange: {
                        // 颜色分布
                        color: ['white', 'Tomato', 'orangered']
                    }
                },
                series: [
                    {
                        name: '确诊',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        //是否开启鼠标缩放和平移漫游
                        itemStyle: {
                            //地图区域的多边形 图形样式
                            normal: {
                                //是图形在默认状态下的样式
                                label: {
                                    show: true,//是否显示标签
                                    textStyle: {
                                        color: "black"
                                    }
                                }
                            },
                            zoom: 1,
                            //地图缩放比例,默认为1
                            emphasis: {
                                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                label: {show: true}
                            }
                        },
                        top: '0%',
                        left: '15%',
                        data: []
                    }
                ]
            }
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);

            // 获取数据
            this.request.get("/echarts/epidemic").then(res => {
                this.total = res.data.chinaTotal.total
                this.today = res.data.chinaTotal.today
                this.extData = res.data.chinaTotal.extData

                let data = [{name: '南海诸岛', value: 0}]
                res.data.areaTree[2].children.forEach(item => {
                    data.push({name: item.name, value: item.total.confirm - item.total.dead - item.total.heal})

                    options.series[0].data = data
                    myChart.setOption(options)
                })
            })

        }
    }
</script>

<style>
    .item {
        text-align: center;
        width: 150px;
        height: 150px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .item:nth-child(3n) {
        margin-right: 0;
    }

    .item_title {
        font-size: 16px;
        font-weight: bold;
        margin-top: 20px;
    }

    .item_num {
        margin-top: 10px;
        font-size: 30px;
        font-weight: bold;
    }

    .item_num_plus {
        font-size: 16px;
        color: #666;
    }
</style>

<!--<template>-->
<!--    <div>-->
<!--        &lt;!&ndash;        <el-row :gutter="10" style="margin-bottom: 40px">&ndash;&gt;-->
<!--        &lt;!&ndash;            <el-col :span="6">&ndash;&gt;-->
<!--        &lt;!&ndash;                <el-card style="color: #409EFF">&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div><i class = "el-icon-user-solid"/>用户总数</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div style="padding: 10px 0;text-align: center;font-weight: bold">&ndash;&gt;-->
<!--        &lt;!&ndash;&lt;!&ndash;                        <el-tag type="primary">100</el-tag> &ndash;&gt;&ndash;&gt;-->
<!--        &lt;!&ndash;                        100&ndash;&gt;-->
<!--        &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--        &lt;!&ndash;                </el-card>&ndash;&gt;-->
<!--        &lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--        &lt;!&ndash;            <el-col :span="6">&ndash;&gt;-->
<!--        &lt;!&ndash;                <el-card style="color: #F56C6C">&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div><i class = "el-icon-money"/>销售总量</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div style="padding: 10px 0;text-align: center;font-weight: bold">￥100000</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                </el-card>&ndash;&gt;-->
<!--        &lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--        &lt;!&ndash;            <el-col :span="6">&ndash;&gt;-->
<!--        &lt;!&ndash;                <el-card style="color: #67C23A">&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div><i class = "el-icon-bank-card"/>收益总额</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div style="padding: 10px 0;text-align: center;font-weight: bold">￥100</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                </el-card>&ndash;&gt;-->
<!--        &lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--        &lt;!&ndash;            <el-col :span="6">&ndash;&gt;-->
<!--        &lt;!&ndash;                <el-card style="color: #E6A23C">&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div><i class = "el-icon-s-shop"/>门店总数</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div style="padding: 10px 0;text-align: center;font-weight: bold">100</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                </el-card>&ndash;&gt;-->
<!--        &lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--        &lt;!&ndash;        </el-row>&ndash;&gt;-->

<!--        <el-row>-->
<!--            <el-col :span="12">-->
<!--                <div id="main" style="width: 500px;height: 400px"></div>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--                <div id="pie" style="width: 500px;height: 400px"></div>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--                <div id="area" style="width: 100%;height: 500px">111</div>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--    </div>-->
<!--</template>-->
<!--<script>-->
<!--    import * as echarts from 'echarts';-->
<!--    import '@/utils/china.js'-->
<!--    export default {-->
<!--        name: "Home",-->
<!--        data() {-->
<!--            return {}-->
<!--        },-->
<!--        mounted() {//页面元素渲染之后触发-->
<!--            var option = {-->
<!--                title: {-->
<!--                    text: '各季度会员数量统计',-->
<!--                    subtext: '趋势图',-->
<!--                    left: 'center'-->
<!--                },-->
<!--                xAxis: {-->
<!--                    type: 'category',-->
<!--                    data: ["第一季度", "第二季度", "第三季度", "第四季度"]-->
<!--                },-->
<!--                yAxis: {-->
<!--                    type: 'value'-->
<!--                },-->
<!--                series: [-->
<!--                    {-->
<!--                        data: [],-->
<!--                        type: 'line'-->
<!--                    },-->
<!--                    {-->
<!--                        data: [],-->
<!--                        type: 'bar'-->
<!--                    }-->
<!--                ]-->
<!--            };-->

<!--            var chartDom = document.getElementById('main');-->
<!--            var myChart = echarts.init(chartDom);-->

<!--            this.request.get("/echarts/members").then(res => {-->
<!--                // 填空-->
<!--                // option.xAxis.data = res.data.x-->
<!--                option.series[0].data = res.data-->
<!--                option.series[1].data = res.data-->
<!--                // 数据准备完毕之后再set-->
<!--                myChart.setOption(option);-->

<!--            })-->

<!--            // 饼图-->

<!--            var pieOption = {-->
<!--                title: {-->
<!--                    text: '各季度会员数量统计',-->
<!--                    subtext: '比例图',-->
<!--                    left: 'center'-->
<!--                },-->
<!--                tooltip: {-->
<!--                    trigger: 'item'-->
<!--                },-->
<!--                legend: {-->
<!--                    orient: 'vertical',-->
<!--                    left: 'left'-->
<!--                },-->
<!--                series: [-->
<!--                    {-->
<!--                        type: 'pie',-->
<!--                        radius: '70%',-->
<!--                        label: {            //饼图图形上的文本标签-->
<!--                            normal: {-->
<!--                                show: true,-->
<!--                                position: 'inner', //标签的位置-->
<!--                                textStyle: {-->
<!--                                    fontWeight: 300,-->
<!--                                    fontSize: 14,    //文字的字体大小-->
<!--                                    color: "#fff"-->
<!--                                },-->
<!--                                formatter: '{d}%'-->
<!--                            }-->
<!--                        },-->
<!--                        data: [],  // 填空-->
<!--                        emphasis: {-->
<!--                            itemStyle: {-->
<!--                                shadowBlur: 10,-->
<!--                                shadowOffsetX: 0,-->
<!--                                shadowColor: 'rgba(0, 0, 0, 0.5)'-->
<!--                            }-->
<!--                        }-->
<!--                    }-->
<!--                ]-->
<!--            };-->

<!--            var pieDom = document.getElementById('pie');-->
<!--            var pieChart = echarts.init(pieDom);-->

<!--            this.request.get("/echarts/members").then(res => {-->

<!--                pieOption.series[0].data = [-->
<!--                    {name: "第一季度", value: res.data[0]},-->
<!--                    {name: "第二季度", value: res.data[1]},-->
<!--                    {name: "第三季度", value: res.data[2]},-->
<!--                    {name: "第四季度", value: res.data[3]},-->
<!--                ]-->
<!--                pieChart.setOption(pieOption)-->
<!--            })-->

<!--            const options ={-->
<!--                //标题样式-->
<!--                title: {-->
<!--                    text: '中国疫情地图',-->
<!--                    x:"center",-->
<!--                    y: '0%',-->
<!--                    textStyle: {-->
<!--                        fontSize: 20,-->
<!--                        color: "#333"-->
<!--                    },-->
<!--                },-->
<!--                //这里设置提示框（鼠标悬浮效果）-->
<!--                tooltip: {-->
<!--                    //数据项图形触发-->
<!--                    trigger: 'item',-->
<!--                    //提示框浮层的背景颜色（鼠标悬浮后的提示框背景颜色）-->
<!--                    backgroundColor: "white",-->
<!--                    //字符串模板（地图）：{a}（系列名称），{b}（区域名称），{c}（合并数值），{d}（无）-->
<!--                    formatter: '地区：{b}<br/>现有确诊病例：{c}'-->
<!--                },-->
<!--                //视觉映射组件-->
<!--                visualMap: {-->
<!--                    top:'center',-->
<!--                    left:'left',-->
<!--                    //数据的范围-->
<!--                    min:10,-->
<!--                    max:100,-->
<!--                    text: ['高','低'],-->
<!--                    realtime:true,//拖拽时，是否实时更新-->
<!--                    calculable:true,//是否显示拖拽用的手柄-->
<!--                    inRange: {-->
<!--                        //颜色分布-->
<!--                        color:['white','Tomato','orangered']-->
<!--                    }-->
<!--                },-->
<!--                series:[{-->
<!--                    name:'确诊',-->
<!--                    type:'map',-->
<!--                    mapType:'china',-->
<!--                    roam:true,-->
<!--                    //是否开启鼠标缩放和平移漫游-->
<!--                    itemStyle: {-->
<!--                        //地图区域的多边形 图形样式-->
<!--                        normal:{-->
<!--                            //是图形在默认状态下的样式-->
<!--                            label:{-->
<!--                                show:true,//是否显示标签-->
<!--                                textStyle:{-->
<!--                                    color:"black"-->
<!--                                }-->
<!--                        }-->
<!--                    },-->
<!--                    zoom: 1,-->
<!--                    //地图缩放比例，默认为1-->
<!--                    emphasis:{-->
<!--                        //是图形在高亮状态下的样式，比如在鼠标悬浮或图例联动高亮时-->
<!--                        label:{show: true}-->
<!--                    }-->
<!--                },-->
<!--                    top: '0%',-->
<!--                    left: '15%',-->
<!--                    data: []-->
<!--                }-->
<!--                ]-->
<!--            }-->
<!--            var areaDom = document.getElementById('area');-->
<!--            var areaChart = echarts.init(areaDom);-->
<!--            //获取数据-->
<!--            this.request.get("/echarts/epidemic").then(res =>{-->
<!--                this.total = res.data.chinaTotal.total-->
<!--                this.today = res.data.chinaTotal.today-->
<!--                this.extData = res.data.chinaTotal.extData-->
<!--                let data = [{name:'南海诸岛',value: 0}]-->
<!--                res.data.areaTree[2].children.forEach(item =>{-->
<!--                    data.push({name: item.name,value: item.total.confirm - item.total.dead - item.total.heal})-->
<!--                    options.series[0].data = data-->
<!--                    areaChart.setOption(options)-->
<!--                })-->
<!--            })-->
<!--        },-->
<!--    }-->
<!--</script>-->